<template>
  <v-app>
    <v-app-bar app color="blue" dark shrink-on-scroll prominent src="https://picsum.photos/1920/1080?random">
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
      <v-toolbar-title>同日云联</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-row
        align="center"
        justify="end"
      >
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
        <v-badge
          top
          :content="3"
          :value='3'
          overlap
          color="deep-purple accent-4"
        >
          <v-avatar color="blue" size="36" @click="handleAvatar">
            <span class="white--text headline">V</span>
          </v-avatar>
        </v-badge>
        
      </v-row>
    </v-app-bar>

    <!-- 侧栏弹框 -->
    <v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
    >
      <v-list
        nav
        dense
      >
      <!-- v-model="group" -->
        <v-list-item-group
          
          active-class="deep-purple--text text--accent-4"
        >
          <v-list-item>
            <v-list-item-icon>
              <v-icon>mdi-home</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon>
              <v-icon>mdi-account</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Account</v-list-item-title>
          </v-list-item>

        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <i class="nhIcon-jiedai"></i>
    <div style="padding: 0 15px">
      <v-alert
        v-model="alert"
        dismissible
        close-icon="mdi-delete"
        color="cyan"
        border="left"
        elevation="2"
        colored-border
        icon="mdi-twitter"
        transition="fade-transition"
      >
        You've got <strong>5</strong> new updates on your timeline!.
      </v-alert>
    </div>
    
    
  </v-app>
</template>

<script>

export default {
  name: 'Home',
  data: () => ({
    alert: true,
    drawer: false,
  }),
  created(){
  },
  methods:{
    handleAvatar(){
    }
  }
}
</script>
